Ext.define("TT.template",{
	window:null,
    
    /*items: {  // Let's put an empty grid in just to illustrate fit layout
        xtype: 'grid',
        border: false,
        columns: [{header: 'World'}],                 // One header just for show. There's no data,
        store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
    },*/
    
    
	constructor: function () {
		this.init(arguments[0].id); 
    },
    init: function (id){
    	var that = this;
    	Ext.define('Template', {
    	    extend: 'Ext.data.Model',
    	    fields: [ 'id', 'name', 'type', 'values' ]
    	});
    	
    	var store = Ext.create('Ext.data.Store', {
    	    storeId:'simpsonsStore',
    	    //fields:['name', 'email', 'phone', 'date'],//model
    	    model:"Template",
    	    data:{
    	    	'items':[
    		        { 'id': '1',  "name":"标题", "type":"string",  "values":""  },
    		        { 'id': '2',  "name":"城市", "type":"select",  "values":"上海;多伦多;纽约"  },
    		        { 'id': '3',  "name":"性别", "type":"radio",  "values":"男;女"  }
    	        ]
    	    },
    	    proxy: {
    	        type: 'memory',
    	        reader: {
    	            type: 'json',
    	            root: 'items'
    	        }
    		    /*,api: {
    				create: 'createPersons',
    				read: 'test.jsons',
    				update: 'updatePersons',
    				destroy: 'destroyPersons'
    			}*/
    	    }
    	});
    	var oneStore= Ext.create('Ext.data.Store', {
    	    fields : ['code', 'name'],
    	    data : [{
    	        name : "text",
    	        code : 'text'
    	    },{
    	        name : "select",
    	        code : "select"
    	    }, {
    	        name : "radio",
    	        code : "radio"
    	    }, {
    	        name : "textarea",
    	        code : "textarea"
    	    }, {
    	        name : "richtextarea",
    	        code : "richtextarea"
    	    }]
    	});
    	var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 2
        });
    	
    	var gridPanel = Ext.create('Ext.grid.Panel', {
    	    store: store,
    	    tbar:[
    	          {
    	        	  text:"添加",
    	        	  handler:function(){

    	        		  var rowIdx = Number(store.getCount())+1;
    	        		  var row = Ext.create("Template", { 'id': rowIdx,  "name":"", "type":"string",  "values":""  });
    	        		  //var row = { 'id': rowIdx,  "name":"标题1", "type":"string",  "values":""  };
    	        		  //store.insert(rowIdx,[row]);
    	        		  store.loadData([row],true);
    	        		  cellEditing.cancelEdit();
    	        		  cellEditing.startEditByPosition({row:rowIdx-1,column:0});
    	        	  }
    	          },
    	          {
    	        	  text:"删除",
    	        	  handler:function(){
    	        		  this.showDeletePanel();
    	        	  }
    	          },
    	          {
    					text:"预览",
    					handler:function(){
    						alert("预览");
    					}
    				}
    	    ],
    	    columns: [
    	        { 	
    	        	text: 'Id',  
    	        	dataIndex: 'id', 
    	        	editor: {
    					xtype: 'textfield',
    					allowBlank: false
    				}
    	        },
    	        { 	
    	        	text: '标题',  
    	        	dataIndex: 'name', 
    	        	editor: {
    					xtype: 'textfield',
    					allowBlank: false
    				}
    	        },
    	        { text: 'Type', dataIndex: 'type', editor: {
    	        	xtype: 'combobox',
    	        	store: oneStore,
    	        	displayField : 'name',
    	            valueField : 'code'
    	        }},
    	        
    	        { text: 'Values', dataIndex: 'values',editor: 'textfield', flex: 1, }
    	    ],
    	    /*selType: 'rowmodel',
    	    plugins: [
    	        Ext.create('Ext.grid.plugin.RowEditing', {
    	            clicksToEdit: 1
    	        })
    	    ]
    		*/
    	    selType: 'cellmodel',
    	    plugins: [
    	              cellEditing
    	    ],
    		buttons:[
    		          {
    		        	  text:"保存",
    		        	  handler:function(){
    		        		  that.window.close();
    		        	  }
    		          },
    		          {
    		        	  text:"取消",
    		        	  handler:function(){
    		        		  that.window.close();
    		        	  }
    		          }
    		    ]
    	});
    	gridPanel.on('edit', function(editor, e) {
    	    // commit the changes right after editing finished
    	    e.record.commit();
    	});
    	
    	
    	this.window = Ext.create('Ext.window.Window', {
    	    title: '模板',
    	    height: 400,
    	    width: 600,
    	    layout: 'fit',
    	    /*items: {  // Let's put an empty grid in just to illustrate fit layout
    	        xtype: 'grid',
    	        border: false,
    	        columns: [{header: 'World'}],                 // One header just for show. There's no data,
    	        store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
    	    },*/
    	    items:gridPanel
    	});
    	
    	Ext.Ajax.request({
    	    url: "artifact/template/"+id+".json",
    	    params: {
    	        id: 2
    	    },
    	    success: function(response){
    	    	var text = response.responseText;
    	        var template = Ext.JSON.decode(text).template;
    	        
    	        for(var i=0;i<template.attributes.length;i++){
    	        	formPanel.add({
    	    	    	xtype: template.attributes[i].attributeType,
    	    	        fieldLabel: template.attributes[i].attributeName,
    	    	        name: 'last',
    	    	        allowBlank: false
    	    	    });
    	        }
    	       
    	    }
    	});
    }
});